{% extends "base.html" %}
{% load static %}
{% block title %}创建{% endblock %}
{% block css %}<link rel="stylesheet" href="{% static 'css/update.css' %}">{% endblock %}
{% block content %}

<div class="update-form">
    <div class="status">{{ status | default_if_none:"" }}</div>
    <h3>新增</h3>
    <form method="post">
        {% csrf_token %}
        <div class="update-info">
            <span class="update-key">主题</span>
            <input class="update-value" type="text" name="theme" value='{{ result.theme }}'> 
        </div>
        <div class="update-info">
            <span class="update-key">标题</span>
            <input class="update-value" type="text" name="title" value='{{ result.title }}'> 
        </div>
        <div class="update-info">
            <span class="update-key">季数</span>
            <input class="update-value" type="text" name="season" list="seasonlist"> 
            <datalist id="seasonlist">
                <option>第一季</option>
                <option>第二季</option>
                <option>第三季</option>
                <option>第四季</option>
                <option>第五季</option>
            </datalist> 
        </div>
        <div class="update-info">
            <span class="update-key">副标题</span>
            <input class="update-value" type="text" name="subtitle"> 
        </div>
        <div class="update-info">
            <span class="update-key">类型</span>
            <input class="update-value" type="text" id="playmode" name="playmode" list="playmodelist" placeholder="请选择类型" oninput="handlePlaymode(event)" value="TV">
            <datalist id="playmodelist">
                <option>TV</option>
                <option>电影</option>
                <option>剧场版</option>
                <option>番外篇</option>
                <option>特别篇</option>
                <option>OVA</option>
            </datalist> 
            <!-- <div class="update-value">
                <select>
                  <option value="Option 1">Option 1</option>
                  <option value="Option 2">Option 2</option>
                  <option value="Option 3">Option 3</option>
                  <option value="Option 4">Option 4</option>
                  <option value="Option 5">Option 5</option>
                  <option value="Option length">
                    Option that has too long of a value to fit
                  </option>
                </select>
            </div> -->
        </div>
        <div class="update-info">
            <span class="update-key">维度</span>
            <!-- <input class="update-value" type="text" name="dim">  -->
            <input class="update-value" type="text" name="dim" list="dimlist" placeholder="请选择维度" value={{ result.dim }}>
            <datalist id="dimlist">
                <option>二维</option>
                <option>三维</option>
                <option>三渲二</option>
            </datalist>
        </div>
        <div class="update-info">
            <span class="update-key">集数</span>
            <input class="update-value" type="number" id="episodes" name="episodes" oninput="handleEpisods(event)" value=12> 
        </div>
        <div class="update-info">
            <span class="update-key">时长</span>
            <input class="update-value" type="text" id="duration" placeholder="以min为单位" name="duration" value=20> 
        </div>
        <div class="update-info">
            <span class="update-key">首集</span>
            <input class="update-value" type="number" id="episode_start" name="episode_start" value=1> 
        </div>
        <div class="update-info">
            <span class="update-key">末集</span>
            <input class="update-value" type="number" id="episode_end" name="episode_end" oninput="handleEpisodEnd(event)" value=12> 
        </div>
        <div class="update-info">
            <span class="update-key">开播日期</span>
            <input class="update-value" type="text" id="date_start" name="date_start" oninput="handleDateStart(event)"> 
        </div>
        <div class="update-info">
            <span class="update-key">完播日期</span>
            <input class="update-value" type="text" id="date_end" name="date_end"> 
        </div>
        <div class="update-info">
            <span class="update-key">制作公司</span>
            <input class="update-value" type="text" name="producer"  value='{{ result.producer }}''> 
        </div>
        

        <input type="submit" value="提交">
</div>

<script>
// 
window.onload = function() {
    var playmodeValue = document.getElementById('playmode').value;
    
    if (playmodeValue=='剧场版' || playmodeValue=='电影') {
        var episodes = document.getElementById('episodes');
        var episode_start = document.getElementById('episode_start');
        var episode_end = document.getElementById('episode_end');
        episodes.value = "";
        episodes.setAttribute('disabled', 'disabled');
        episodes.style.backgroundColor = '#eee';
        episode_start.value = "";
        episode_start.setAttribute('disabled', 'disabled');
        episode_start.style.backgroundColor = '#eee';
        episode_end.value = "";
        episode_end.setAttribute('disabled', 'disabled');
        episode_end.style.backgroundColor = '#eee';
        var date_end = document.getElementById('date_end');
        date_end.value = "";
        date_end.setAttribute('disabled', 'disabled');
        date_end.style.backgroundColor = '#eee';
    } else {
        document.getElementById('episodes').value = 12;
        document.getElementById('episode_start').value = 1;
        document.getElementById('episode_end').value = 12;
    }
}
// 监听动画类型，剧场版、电影自动取消集数、首集、末集
function handlePlaymode(event) {  
    const playmodeValue = event.target.value;
    var episodes = document.getElementById('episodes');
    var episode_start = document.getElementById('episode_start');
    var episode_end = document.getElementById('episode_end');
    var date_end = document.getElementById('date_end');
    if (playmodeValue=='剧场版' || playmodeValue=='电影') { 
        episodes.value = "";
        episodes.setAttribute('disabled', 'disabled');
        episodes.style.backgroundColor = '#eee';
        episode_start.value = "";
        episode_start.setAttribute('disabled', 'disabled');
        episode_start.style.backgroundColor = '#eee';
        episode_end.value = "";
        episode_end.setAttribute('disabled', 'disabled');
        episode_end.style.backgroundColor = '#eee';
        date_end.value = "";
        date_end.setAttribute('disabled', 'disabled');
        date_end.style.backgroundColor = '#eee';
    } else {
        document.getElementById('episodes').value = 12;
        document.getElementById('episode_start').value = 1;
        document.getElementById('episode_end').value = 12;
        episodes.removeAttribute('disabled');
        episode_start.removeAttribute('disabled');
        episode_end.removeAttribute('disabled');
        date_end.removeAttribute('disabled');
        episodes.style.backgroundColor = '#fff';
        episode_start.style.backgroundColor = '#fff';
        episode_end.style.backgroundColor = '#fff';
        date_end.style.backgroundColor = '#fff';
    }
}

// 监听输入集数的变化，自动填充末集
function handleEpisods(event) {  
    const episodsValue = event.target.value;
    document.getElementById('episode_end').value = episodsValue;
}
// 监听末集的变化，自动填充集数
function handleEpisodEnd(event) {  
    const episodendValue = event.target.value;
    var episodestartValue = document.getElementById('episode_start').value;
    document.getElementById('episodes').value = episodendValue - episodestartValue + 1;
}
// 监听开播日期，自动生成完播日期
function handleDateStart(event) {
    const datestartValue = event.target.value;
    var playmodeValue = document.getElementById('playmode').value;
    if(datestartValue.length==10 && playmodeValue !='剧场版' && playmodeValue!='电影' ) {
        var dateStart = new Date(datestartValue);
        var episode_start = document.getElementById('episode_start').value;
        var episode_end = document.getElementById('episode_end').value;
        var days = (episode_end - episode_start) * 7;
        var dateEnd = dateStart.setDate(dateStart.getDate() + days);
        dateEnd = new Date(dateEnd);
        var year = dateEnd.getFullYear();
        var month = ('0' + (dateEnd.getMonth() + 1)).slice(-2);
        var day = ('0' + dateEnd.getDate()).slice(-2);
        var dateendValue = year + '-' + month + '-' + day; 
        document.getElementById('date_end').value = dateendValue;
    }
}

</script>
    
{% endblock %}